<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <h1>xxx商品管理系统</h1>
    <div id="publish">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="button" value="发布商品">
    </div>

    <ul>
        <!-- <li>
            <h2></h2>
            <img src="" alt="">
            <p></p>
        </li> -->
    </ul>
    <button id="next-btn">下一页</button>
    <script>
        /*         商品列表接口

所有商品接口
get
参数
pagesize  每页获取几个数据
pagenum 获取第几页数据
uid  用户id
http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 */

        let pagenum = 0;
        let pagesize = 10;
        let uid = localStorage.getItem('uid'); //获取用户id

        // 商品列表
        async function loadList() {
            let listAPI = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php'
            try {

                let {
                    data
                } = await axios.get(listAPI, {
                    params: {
                        pagesize,
                        pagenum,
                        uid
                    }
                });
                console.log(data);
                let productArr = data.data;
                console.log(productArr);

                let resArr = productArr.map(pObj => `
                    <li>
                        <h2>${pObj.pname}</h2>
                        <img src="${pObj.pimg}" alt="">
                        <p>${pObj.pprice}</p>

                        <button class="delete-btn" onclick="delBtnEvent(${pObj.pid},window.event)">删除</button>
                        <a href="update.html?pid=${pObj.pid}">修改</a>                        

                    </li>
                `)
                let list = document.querySelector('ul')
                list.innerHTML = resArr.join('')


            } catch (error) {

            }


        }

        // 翻页 功能
        let nextBtn = document.querySelector('#next-btn');
        nextBtn.onclick = function () {
            pagenum++;
            loadList()
        }


        // 发布商品功能 
        /* 
            1- 事件
        */
        let ipts = document.querySelectorAll('#publish input')
        // 发布按钮添加事件
        ipts[4].onclick = function () {
            let pname = ipts[0].value;
            let pprice = ipts[1].value;
            let pdesc = ipts[2].value;
            let pimg = ipts[3].value;

            // 发布商品接口

            // 接口地址： http: //jx.xuzhixiang.top/ap/api/goods/goods-add.php
            //     接口请求方式： post
            // 接口参数：
            // 1.
            // pimg
            // 2.
            // pname
            // 3.
            // pprice
            // 4.
            // pdesc
            // 5.
            // uid（ 可选） 用户商品
            let goodsAddAPI = 'http://jx.xuzhixiang.top/ap/api/goods/goods-add.php'
            axios.get(goodsAddAPI, {
                    params: {
                        pname,
                        pprice,
                        pimg,
                        pdesc,
                        uid
                    }
                })
                .then(function (res) {
                    console.log(res.data);
                    pagenum = 0;
                    // 发布成功以后 刷新列表
                    loadList()
                })
            // axios.post(goodsAddAPI, {
            //         pname,
            //         pprice,
            //         pimg,
            //         pdesc,
            //         uid

            //     })
            //     .then(function (res) {
            //         console.log(res.data);
            //         pagenum = 0;
            //         // 发布成功以后 刷新列表
            //         loadList()
            //     })

        }

        loadList();



        // 删除按钮的 处理函数
        async function delBtnEvent(pid, evt) {
            console.log(1);
            console.log(pid); //点击的获取了pid 
            let uid = localStorage.getItem('uid')
            let token = localStorage.getItem('token')
            let url = 'http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php';
            let params = {
                uid,
                pid,
                token
            };
            let res = await axios.get(url, {
                params
            })
            console.log(res);
            if (res.data.code == 1) {
                //删除成功
                // 页面刷新  
                // location.reload()

                // 找到 按钮  -》元素 li  ，remove  
                // console.log(evt); //事件对象 
                // evt.target //删除按钮
                // evt.target.parentNode.remove()

                // 刷新列表
                loadList()

            }


            //             删除商品 接口
            // 接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
            //      接口请求方式：get
            //      接口参数：

            //             pid（必选）商品的id
            //             uid（必选）用户的id
            //             token（必选）登陆时候返回的token


            //      使用方式


            // http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459
        }
    </script>

</body>

</html>